import { Descriptions, Table } from "antd";
import styled from "styled-components";

const InterfaceDescription = () => {
  return <StyleWrap>
    <div className="header-bar">API接口信息</div>
    <Descriptions
      bordered
      column={1}
      labelStyle={{
        textAlign: 'center',
        width: '165px'
      }}
    >
      <Descriptions.Item label="接口描述">设施信息服务(数据接口)</Descriptions.Item>
      <Descriptions.Item label="接口地址">http://192.168.2.100:20041/openapi/bigdata_api_1721717391851876353/nova-se/api/v1/catalog/service/data/api/1721717391851876353</Descriptions.Item>
      <Descriptions.Item label="支持格式">[ "GET" ]</Descriptions.Item>
      <Descriptions.Item label="请求示例">http://192.168.2.100:20041/openapi/bigdata_api_1721717391851876353/nova-se/api/v1/catalog/service/data/api/1721717391851876353</Descriptions.Item>
    </Descriptions>
    <div className="header-bar">调用说明</div>
    <Descriptions
      bordered
      column={1}
      labelStyle={{
        textAlign: 'center',
        width: '165px'
      }}
    >
      <Descriptions.Item label="说明">请按照以下步骤调用接口</Descriptions.Item>
      <Descriptions.Item label="调用步骤">1、订阅接口 2、调用接口</Descriptions.Item>
    </Descriptions>
    <div className="header-bar">请求参数</div>
    <Table
      bordered
      columns={[
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: 'desc',
          align: 'center'
        },
        {
          title: '必填',
          dataIndex: 'type',
          align: 'center'
        },
        {
          title: '说明',
          dataIndex: 'length',
          align: 'center'
        }
      ]}
      dataSource={[]} />
    <div className="header-bar">返回参数</div>
    <Descriptions
      bordered
      column={1}
      labelStyle={{
        textAlign: 'center',
        width: '165px'
      }}
    >
      <Descriptions.Item label="zhName">code</Descriptions.Item>
      <Descriptions.Item label="name">code</Descriptions.Item>
      <Descriptions.Item label="type">无</Descriptions.Item>
      <Descriptions.Item label="length">无</Descriptions.Item>
      <Descriptions.Item label="desc">返回码； 200表示成功</Descriptions.Item>
    </Descriptions>
  </StyleWrap>;
}

const StyleWrap = styled.div`
  .header-bar {
    padding: 12px 24px;
    color: rgba(255, 255, 255, 0.65);
    background-color: #002f5c;
    border-left: 1px solid rgba(116, 186, 251, 0.43);
    border-right: 1px solid rgba(116, 186, 251, 0.43);
    font-size: 16px;
    &:first-child{
      border-top: 1px solid rgba(116, 186, 251, 0.43);
    }
  }

  .ant-descriptions .ant-descriptions-view{
    border-radius: 0;
  }
  .ant-table-wrapper .ant-table-container{
    border-radius: 0;
  }
  .ant-table-wrapper .ant-table{
    border-radius: 0;
  }
  .ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {
    border-radius: 0;
}
`

export default InterfaceDescription;